<template>
  <div class="tb_container">
    <div class="search_bar">
      <p class="comText">评论</p>
    </div>
    <div class="com">
      <el-input
        v-model="comment"
        :rows="2"
        type="textarea"
        placeholder="快和小农一起参与评论哦～"
      />
      <el-button type="primary" @click="addClick" style="height: 52px;border-radius: 8px;">发表</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { addComment , getComment } from '@/api/comment'
// 引入pinia中的useStore库
import { useStore } from '@/stores/userData'
// 引入storeToRefs，使普通数据变为响应式数据
import { storeToRefs } from "pinia";
// 接收useStore
const store = useStore()
// 解构并使数据具有响应式
const { current_post_id , commentData } = storeToRefs(store);
const comment = ref('')
const addClick = () => {
  let data = {}
  data.comContent = comment.value
  data.userID = localStorage.getItem('user')
  data.postID = current_post_id.value
  console.log(data)
  addComment(data).then((res) => {
    if(res.code == 1){
      ElNotification({
        title: '评论成功',
        message: '已发表评论，快去看看吧',
        type: 'success',
      })
      getComment(data.postID).then((res) => {
        console.log(res);
        commentData.value = res.data.records
      })
    }
  })
}
</script>
<style lang="scss" scoped>
.tb_container{
  display: grid;
  grid-template-rows: 50px auto;
  width: 76%;
  height: auto;
  backdrop-filter: saturate(50%) blur(8px);
  background: rgba(255,255,255,.7);
  position: absolute;
  z-index: 10;
}
.search_bar{
  height: 100%;
  position: relative;
}
.comText{
  position: absolute;
  left: calc(50% - 14px);
  top: calc(50% - 11px);
  color: #777777;
}
.com{
  padding: 10px 30px;
  display: grid;
  grid-template-columns: 80% 20%;
  gap: 10px;
}
</style>